<template>
  <com-main>
    <div slot="com_header">首页>用户管理>用户列表</div>
    <div slot="com_content">
      <div>
        <el-form>
          <el-form-item>
            <el-input
              style="width: 500px"
              v-model="searchobj.query"
              placeholder="请输入用户名"
             
            ></el-input>
            <el-button @click="query"><i class="el-icon-search"></i></el-button>
            <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 添加模态创 -->
      <div>
        <el-dialog title="添加账号" :visible.sync="dialogFormVisible">
          <el-form :model="saveobj" label-width="120px">
            <el-form-item label="用户名" >
               <el-input v-model="saveobj.username" style="width:500px"></el-input>
            </el-form-item>
            <el-form-item v-model="saveobj.password" label="密码">
               <el-input v-model="saveobj.password" style="width:500px"></el-input>
            </el-form-item>
            <el-form-item  v-model="saveobj.email" label="邮箱地址">
               <el-input  v-model="saveobj.email" style="width:500px"></el-input> </el-form-item>
            <el-form-item  v-model="saveobj.mobile" label="电话"> 
               <el-input  v-model="saveobj.mobile"  style="width:500px"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="tianjia">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 编辑用户模态创 -->
      <div>
        <el-dialog title="用户信息维护" :visible.sync="aaabbb">
         
             <el-form label-width="120px" ::model="bbobj">
            <el-form-item label="用户名" disabled='true'>
                  <el-input v-model="bbobj.username" style="width:500px" ></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址">
               <el-input  v-model="bbobj.email" style="width:500px"></el-input> </el-form-item>
            <el-form-item label="电话"> 
               <el-input  v-model="bbobj.mobile"  style="width:500px"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="aaabbb = false">取 消</el-button>
            <el-button type="primary" @click="bbaobj">确 定</el-button>
          </div>
        </el-dialog>
      </div>

   <!-- 编辑角色模态创 -->
      <div>
        <el-dialog title="分配角色" :visible.sync="aaa">
         
             <el-form label-width="120px" :model="aaaobj">
            <el-form-item label="用户名:" disabled='true'>
                  {{aaaobj.username}} 
            </el-form-item>
            <el-form-item label="当前角色:">{{aaaobj.role_name}}</el-input> </el-form-item>
            <el-form-item label="角色权限:" v-model="aaaobj.rid" > 
               <el-select v-model="aaaobj.rid" placeholder="请选择角色">
                 <el-option  v-for="(item,index) in rolelist" 
                 :label="item.roleName" 
                  :value="item.roleName"
                  :key="item.id">
                 </el-option>
                 </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="aaabbb = false">取 消</el-button>
            <el-button type="primary" @click="upddown">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <el-table :data="userslist" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱地址"> </el-table-column>
        <el-table-column  label="创建时间">
         <template slot-scope="{row}">
            {{row.create_time | timeMF}}
         </template> 
         </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="state(row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" @click="search(row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="updsuers(row)"></el-button>
            <el-button type="warning" icon="el-icon-s-tools" @click="updrole(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margintop: 50px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchobj.pagenum"
          :page-sizes="[1, 2, 4, 8]"
          :page-size="searchobj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div> 
    </div>
  </com-main>
</template>
<script>
import ComMain from "../../components/commain.vue";
import { api_users, api_state, api_save,api_search,api_updusers,api_updrole,api_roles } from "../../api/users";
export default {
  components: {
    ComMain,
  },
  data() {
    return {
      rid:[],
      total:1,
      dialogFormVisible: false,
      aaabbb: false,
      aaa: false,
      searchobj: {
        query: "",
        pagenum: 1,
        pagesize: 4,
      },
      usersobj: {
      },
      userslist: [],
      //添加数据
      saveobj:{
         username:'',
         password:'',
         email:'',
         mobile:''
      },
      //编辑数据
         aaobj:{
            id:1,
            email:"",
            mobile:"",
         },
         //编辑数据模态创
         bbobj:{},
         aaaobj:{
          id: 0,
        rid: "",
        role_name: "",
        username: "",
         },
         rolelist:[]
    }
  },
  mounted() {
    this.query();
  },
  methods: {
      //编辑获取角色
      async updrole(row){
         this.aaa= true;
         let rst=await api_roles();
         let{data,meta}=rst;
        this.aaaobj.id=row.id;
        this.aaaobj.role_name=row.role_name;
        this.aaaobj.username=row.username;
        this.rolelist=data;
        //  this.rid=data.map(item => {
        //     return item.id
        // });
        console.log(row);
       },
       //
       async upddown(){
        let{id}=this.aaaobj;
       
        if(this.aaaobj.rid){
let rst=await api_updrole(`users/${id}/role`,{rid:this.aaaobj.rid});
        }
        let {data,meta}=rst;
        if(meta.status==200){
          this.$message.success(meta.msg);
        }else{
           this.$message.error(meta.msg);
        }
        // console.log(rst);

       },
        // users/:id/role
      //删除单个用户
      async updsuers(row){
        let rst=await api_updusers(`users/${row.id}`);
        let {data,meta}=rst;
        if(meta.status==200){
          this.$message.success(meta.msg);
       
        }else{
          this.$$message.error(meta.msg);
        }
        
      },

    //编辑用户
     async search(row){
      this.aaabbb= true;
      this.bbobj=row;
      },
      //编辑用户保存
      async bbaobj(){
     let row=this.bbobj;
      let rst=await api_search(`users/${row.id}`,row);
      let {data,meta}=rst;
      if(meta.status==200){
        this.$message.success(meta.msg);
        this.query();
      }
      this.aaabbb= false;
      },
    //添加用户
    async tianjia() {
      let obj=this.saveobj;
      let rst=await api_save(obj)
      let {data,meta}=rst;
      let {msg,status}=meta;
      if(status==201){
         this.$message.success(msg);
      }else{
         this.$message.error(msg);
      }
      this.query();    
      },
    //修改状态
    async state(row) {
      let { id, mg_state } = row;
      let rst = await api_state({ uId: id, type: mg_state });
      let { data, meta } = rst;
      let { msg, status } = meta;
      if (status == 200) {
        this.$message.success(msg);
      } else {
        this.$message.error(msg);
      }
    },
    //数据渲染
    async query() {
      let rst = await api_users(this.searchobj);
      let { data, meta } = rst;
      this.usersobj = data;
      this.userslist = data.users;
      this.total=data.total;
      // console.log(data);

    },
    handleSizeChange(val) {
      this.searchobj.pagesize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchobj.pagenum = val;
      this.query();
    },
  },
};
</script>
<style>
.cell {
  display: flex;
  justify-content: center;
}
.el-table .el-table__cell {
  text-align: center;
}

</style>